<template>

    <div v-if="ready" id="game-iframe-base">
        <YvBtn class="authBtn" @click="showAuthModal">
            申请授权
        </YvBtn>
        <div v-if="info.httype == 1">
            <div id="game-sq">
                申请授权：点击申请授权按钮 / Q 3097411322
                <br>
                <span class="ps">PS: 备注：游戏授权+游戏账号+游戏名+区服，不备注不通过</span>
                <br>
                默认授权码(密码)是你的账号;如账号是114514,授权码就是114514
            </div>
            <iframe :src="info.ht" id="game-iframe" width="100%" height="100%" frameborder="0"
                scrolling="auto"></iframe>
        </div>
        <div v-else>
            <div id="game-sq">
                <span class="errorfont">Backend Website Reject</span>
                <br>
                {{ info.title }}后台由于开发者限制
                <br>
                未允许本站使用内联Iframe
                <br>
                请点击下方按钮跳转到玩家后台页面
                <br>
                有任何疑问请联系若雨 Q 3097411322
            </div>
            <div id="game-sq">
                申请授权：点击下方申请授权按钮 / Q 3097411322
                <br>
                授权问题 + QQ 3097411322 备注: 游戏授权
                <br>
                <span class="ps">PS:</span>
                <br>
                默认授权码(密码)是你的账号;如账号是114514,授权码就是114514
            </div>
            <YvBtn id="goHrefBtn" @click="goHref">前往《{{ info.title }}》后台页面</YvBtn>
        </div>

    </div>
    <div class="no-game" v-else>
        无法获取后台,游戏KEY : {{ keyw }}不存在
        <YvBtn @click="goBack">
            返回列表
        </YvBtn>
    </div>
    <YvModal ref="authModal" @show="authVisible = true" @hide="authVisible = false">
        <template #name="header">
            申请授权
        </template>

    </YvModal>
</template>

<script>
import { get } from '@/js/request'
export default {
    name: 'gameIfame',
    created() {
        this.keyw = this.$route.params.keyw
        this.getInfo();
        let timer = setInterval(() => {
            if (this.ready) {
                console.log("请求成功：正在去除定时器");
                clearInterval(timer);
            } else {
                this.getInfo();
            }
        }, 2000);
    },
    data() {
        return {
            respVisible: false,
            ready: false,
            info: {},
            keyw: "",
        }
    },
    methods: {
        getInfo() {
            get('/anon/game/query?key=' + this.keyw).then(res => {
                if (res.code == 200) {
                    console.log(res);
                    this.info = res.result;
                    if (res.result) {
                        this.ready = true;
                    }
                    else {
                        this.ready = false;
                    }
                }
            }).catch(ex => {
                console.log(ex);
            })
        },
        goBack() {
            this.$router.push('/game');
        },
        goHref() {
            window.open(this.info.ht);
        },
        showAuthModal() {
            this.$refs.authModal.show();
        }
    },
}
</script>

<style scoped>
body {
    margin: 0;
}

.authBtn{
    display: block;
    margin: 0 auto;
    margin-top: 20pt;
    padding: 4pt 6pt;
}

#game-iframe {
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 90vh;
}

#game-iframe-base {
    overflow-y: scroll;
}

.no-game {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: absolute;
    font-size: 16pt;
}

.no-game>* {
    margin: 30pt;
}

#game-sq {
    font-size: 10pt;
    text-align: center;
    margin: 10pt auto;
    margin-bottom: 0;
    z-index: 9;
    line-height: 16pt;
}

#goHrefBtn {
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 20pt;
    padding: 8pt 12pt;
}

.errorfont {
    color: rgb(255, 95, 95);
    font-size: 18pt;
    line-height: 36pt;
}

.ps {
    margin-top: 10pt;
    color: #7755aa;
}
</style>